/**
 * 
 * @authors 前端小灰狼
 * @date    2020-12-10 16:48:28
 * @version v1.0
 * @description the core js of todolist project
 * 
 * ━━━━━━神兽出没━━━━━━
 * 　　   ┏┓　 ┏┓
 * 　┏━━━━┛┻━━━┛┻━━━┓
 * 　┃              ┃
 * 　┃       ━　    ┃
 * 　┃　  ┳┛ 　┗┳   ┃
 * 　┃              ┃
 * 　┃       ┻　    ┃
 * 　┃              ┃
 * 　┗━━━┓      ┏━━━┛ Code is far away from bugs with the animal protecting.
 *       ┃      ┃     神兽保佑,代码无bug。
 *       ┃      ┃
 *       ┃      ┗━━━┓
 *       ┃      　　┣┓
 *       ┃      　　┏┛
 *       ┗━┓┓┏━━┳┓┏━┛
 *     　  ┃┫┫　┃┫┫
 *     　  ┗┻┛　┗┻┛
 *
 * ━━━━━━感觉萌萌哒━━━━━━
 */

// 请根据考试说明文档中列出的需求进行作答
// 预祝各位顺利通过本次考试，see you next week！
// ...
$(function () {
    var $title = $("#title");

    $title.keydown(function (evt) {
        var e = evt || event;

        if (e.keyCode === 13) {
            createTodo();
            $title.val("");
            todocount();
        }

    });

    $("#todolist").on("click", "p", function () {
        $(this).html("<input type='text' value='" + $(this).text() + "'>");
        var $ipt = $(this).children()
        $ipt.click(function (evt) {
            var e = evt || event;
            e.stopPropagation();
        })
        $ipt.select();
        $ipt.blur(function (evt) {
            this.outerHTML = this.value;
        })

    })

    $("section").on("click", "a", function () {
        $(this).parent().remove();
        todocount();

    })

    function todocount() {
        var content = $("#todolist li").length;
        $("#todocount").text(content)
        $("#donecount").text($("#donelist li").length);
    }

    function createTodo() {
        var val = $title.val();
        var $li = $(`
                  <li>
                        <input type="checkbox">
                        <p>${val}</p >
                  </li>`);

        $("#todolist").append($li);
    }
    $("section").on("change", "input[type=checkbox]", function () {

        if ($(this).prop("checked")) {
            $("#donelist").append($(this).parent());
        } else {
            $("#todolist").append($(this).parent())
        }
        todocount();



    });

    $(function () {
        $.ajax({
            type: "get",
            url: "https://www.fastmock.site/mock/5199a9d4f7bb99d4ffb8eb29bef98c7a/_data/api/text",
            success: function (res) {
                console.log(res);
                $("#ipv4").html(res.data.beginip);
                $("#addr").html(res.data.country + "&emsp;" + res.data.area);
            },
            error: function (err) {
                console.log(err);
            }
        })
    })
})

